<template>
	<view class="">
		<view class="phone">
			<view>
				<u-form-item class="phone-item">
					<u-input placeholder="输入手机号码"  maxlength="11" type="number" :clearable="false" v-model="form.phone" :custom-style="phoneInput"  />
				</u-form-item>
			</view>
			<text class="iconfont kang-huafei"></text>
			<view class="verification-code">
				<u-verification-code :seconds="60" ref="uCode" @change="handleCodeChange">
				</u-verification-code>
				<text @tap="handleGetCodeClick" class="get-code">{{tips}}</text>
			</view>
		</view>
		<view class="phone">
			<view>
				<u-form-item class="phone-item">
					<u-input placeholder="输入验证码" type="number" v-model="form.verificationCode" />
				</u-form-item>
			</view>
			<text class="iconfont kang-dunpai"></text>
		</view>
		<view class="submit">
			<uv-btn :loading="loading" shape="circle" @click="handleSubmitClick" text="确定提交" loading-text="提交中..."></uv-btn>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				//phone
				phoneInput:{
					paddingRight:'120rpx'
				},
				//Form data
				form:{
					reason:'',
					phone:'',
					verificationCode:''
				},
				tips:'',
			}
		},
		methods:{
			//verification code
			handleCodeChange(text) {
				this.tips = text;
			},
			handleGetCodeClick() {
				//Verify mobile phone number				
				if(this.$utils.isPhone(this.form.phone)){
					//Is it being acquired
					if(this.$refs.uCode.canGetCode){
						
						this.$refs.uCode.start();
						this.getCodeRequest();//request
						
					}else{
						this.$utils.toast('正在获取验证码');
					};
				}else{
					this.$utils.toast('请输入正确的手机号格式');
				}
			},
			getCodeRequest(){
				this.$u.api.getChargeRepairCode({
					phone:this.form.phone,
					user_log_id:'',
					type:'2',//
				}).then(res => {
					if(res.result_code=='347'){
						this.$utils.toast('验证码已发送');
					};
				}).catch(err=>{})
			},
			handleSubmitClick(){
			if(this.initStatus=='3' && this.$utils.isAllEmpty(this.form.phone)){
				//手机号后端要求必填时，才验证手机号
				this.$utils.toast('手机号不能为空');
			}else if(this.initStatus=='3' && this.$utils.isAllEmpty(this.form.verificationCode)){
				//手机号后端要求必填时，才验证手机号的验证码
				this.$utils.toast('验证码不能为空');
			}else if(this.initStatus=='3' && !this.$utils.isPhone(this.form.phone)){
				//手机号后端要求必填时，才验证手机号
				this.$utils.toast('手机号格式不正确');
			}else{
				this.$u.api.getLogin_replace({
					platform:'applet',
					phone:this.form.phone,
					identifying_code:this.form.verificationCode,//
				}).then(res => {
					if(res.result_code == 361){
						setTimeout(()=>{
						this.$utils.toast('更换手机号成功!');	
						},1000)
						uni.navigateBack({				
						  delta: 1,	
						});
					}else{
						this.$utils.toast(res.msg);
					}
				}).catch(err=>{})
					
			}
			
			}
		}
	}
</script>

<style lang="scss" scoped>
	.iconfont{
		color:#0da297;
		font-size: 50rpx;
		position:absolute;
		left:0;
		top:50%;
		transform: translateY(-50%);
	}
	.verification-code{
		position:absolute;
		right:0;
		top:50%;
		transform: translateY(-50%);
	}
	.phone{
		position: relative;
		margin:0 35rpx;
		padding-left:70rpx;
	}
	.submit {
		margin: 50rpx 10% 0;
	}
</style>